'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ScrollableTabView, {
    DefaultTabBar,
    ScrollableTabBar
} from 'react-native-scrollable-tab-view';
import Toast from '../Utils/toast';
import QuestionDetailsPage from '../Pages/QuestionDetailsPage';
import UserAPIService from "../Commom/UserAPIService";
export default class MyQuestionAnswerPage extends Component {
    constructor(props) {
        super(props);
        var questionData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var AnswerData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            questionDataSource: questionData,
            answerDataSource: AnswerData,
            isRefreshing: false,
            release_record_count: 1,
            release_page: 1,
            release_data: [],
            join_record_count: 1,
            join_page: 1,
            join_data: [],
        }
        this.questionListRow = this.questionListRow.bind(this);

    }

    componentDidMount() {
        UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '0', 1).then((ret)=> {
            this.setState({
                release_page: Number(ret.page),
                release_record_count: ret.record_count,
                release_data: ret.result,
                questionDataSource: this.state.questionDataSource.cloneWithRows(ret.result),
            });
        }).catch((err)=> {

        });
        UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '1', 1).then((ret)=> {
            this.setState({
                join_page: Number(ret.page),
                join_record_count: ret.record_count,
                join_data: ret.result,
                answerDataSource: this.state.answerDataSource.cloneWithRows(ret.result),
            });
        }).catch((err)=> {

        });
    }

    BackAction() {
        this.props.navigator.pop();
    }

    goToPageQuestionDetailsPage(row) {
        this.props.navigator.push({
            name: 'QuestionDetailsPage',
            component: QuestionDetailsPage,
            passProps: {
                ID: row.id,
            }
        });
    }

    //刷新数据
    onRefreshReleaseData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '0', 1).then((ret)=> {
            this.setState({
                isRefreshing: false,
                release_page: Number(ret.page),
                release_record_count: ret.record_count,
                release_data: ret.result,
                questionDataSource: this.state.questionDataSource.cloneWithRows(ret.result),
            });
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }

    //刷新数据
    onRefreshJoinData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '1', 1).then((ret)=> {
            this.setState({
                isRefreshing: false,
                join_page: Number(ret.page),
                join_record_count: ret.record_count,
                join_data: ret.result,
                answerDataSource: this.state.answerDataSource.cloneWithRows(ret.result),
            });
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }

    //加载更多数据
    loadMoreReleaseData() {
        if (this.state.release_page < this.state.release_record_count) {
            this.setState({
                isRefreshing: true,
            });
            UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '0', this.state.page + 1).then((ret)=> {
                let wanjian = [];
                wanjian = this.state.release_data;
                for (var i = 0; i < ret.result.length; i++) {
                    wanjian.push(ret.result[i])
                }
                this.setState({
                    isRefreshing: false,
                    release_data: wanjian,
                    questionDataSource: this.state.questionDataSource.cloneWithRows(wanjian),
                });
                Toast.show('木有更多数据');
            }).catch((err)=> {
                this.setState({
                    isRefreshing: false,
                });
            });
        } else {
            if (this.state.release_page != 1) {
                Toast.show('木有更多数据');
            }
            this.setState({
                isRefreshing: false,
            });
        }
    }

    //加载更多数据
    loadMoreJoinData() {
        if (this.state.join_page < this.state.join_record_count) {
            this.setState({
                isRefreshing: true,
            });
            UserAPIService.questionAnswerList(Global.Const.token, Global.Const.registeredId, '1', this.state.page + 1).then((ret)=> {
                let wanjian = [];
                wanjian = this.state.join_data;
                for (var i = 0; i < ret.result.length; i++) {
                    wanjian.push(ret.result[i])
                }
                this.setState({
                    isRefreshing: false,
                    join_data: wanjian,
                    answerDataSource: this.state.answerDataSource.cloneWithRows(wanjian),
                });
                Toast.show('木有更多数据');
            }).catch((err)=> {
                this.setState({
                    isRefreshing: false,
                });
            });
        } else {
            if (this.state.join_page != 1) {
                Toast.show('木有更多数据');
            }
            this.setState({
                isRefreshing: false,
            });
        }
    }


    questionListRow(rowData, sectionID, rowID) {
        return (
            <TouchableOpacity onPress={() => this.goToPageQuestionDetailsPage(rowData)}>
                <View style={{backgroundColor:'white'}}>
                    <View
                        style={{flexDirection:'row',backgroundColor:'white'}}>
                        <View
                            style={{width:34,height:34,marginLeft:10,marginRight:10,marginTop:10,borderRadius:17,justifyContent:'center',alignItems:'center',backgroundColor:'#F8B551'}}
                        >
                            <Text
                                style={{color:'white',marginBottom:2,fontSize:12,backgroundColor:'rgba(0,0,0,0)'}}>问</Text>
                        </View>
                        <View style={{width:Global.Const.size.width-65,marginTop:10}}>
                            <Text style={{color:'black',marginRight:10}}>{rowData.content}</Text>
                        </View>
                    </View>
                    <View
                        style={{marginTop:25,width:Global.Const.size.width,height:30,alignItems:'flex-end'}}>
                        <Text style={{marginRight:15}}>{rowData.time}</Text>
                    </View>
                    <View
                        style={{width:Global.Const.size.width,height:15,backgroundColor:Global.Const.transparent}}></View>
                </View>
            </TouchableOpacity>
        );
    }

    answerListRow(rowData, sectionID, rowID) {
        return (
            <TouchableOpacity onPress={() => this.goToPageQuestionDetailsPage(rowData)}>
                <View style={{backgroundColor:'white'}}>
                    <View
                        style={{flexDirection:'row',backgroundColor:'white',marginTop:10}}>
                        <View
                            style={{width:34,height:34,marginLeft:10,marginRight:10,marginTop:10,borderRadius:17,justifyContent:'center',alignItems:'center',backgroundColor:'#F8B551'}}
                        >
                            <Text
                                style={{color:'white',marginBottom:2,fontSize:12,backgroundColor:'rgba(0,0,0,0)'}}>问</Text>
                        </View>
                        <View style={{width:Global.Const.size.width-60,marginTop:10}}>
                            <Text style={{color:'black',marginRight:10}}>{rowData.content}</Text>
                        </View>
                    </View>
                    <View
                        style={{flexDirection:'row',backgroundColor:'white'}}>
                        <View
                            style={{width:34,height:34,marginLeft:10,marginRight:10,marginTop:10,borderRadius:17,justifyContent:'center',alignItems:'center',backgroundColor:'#24CD78'}}
                        >
                            <Text
                                style={{color:'white',marginBottom:2,fontSize:12,backgroundColor:'rgba(0,0,0,0)'}}>答</Text>
                        </View>
                        <View style={{width:Global.Const.size.width-60,marginTop:10}}>
                            <Text style={{color:'black',marginRight:10}}>{rowData.answer[0].content}</Text>
                        </View>
                    </View>
                    <View
                        style={{marginTop:25,width:Global.Const.size.width,height:30,alignItems:'flex-end'}}>
                        <Text style={{marginRight:15}}>{rowData.time}</Text>
                    </View>
                    <View
                        style={{width:Global.Const.size.width,height:15,backgroundColor:Global.Const.transparent}}></View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>我的问答</Text>
                    </View>
                </View>
                <View
                    style={{backgroundColor:Global.Const.transparent,flex:1,borderTopWidth:2,borderColor:Global.Const.transparent}}>
                    <ScrollableTabView
                        renderTabBar={
                            () => <DefaultTabBar
                            textStyle={{ fontSize: 15,marginTop: 8}}
                            style={{height:40,borderBottomColor: '#F5F5F5',backgroundColor:'white'}}/>}
                        tabBarUnderlineStyle={{backgroundColor: '#24CD78',height:3}}
                        tabBarUnderlineColor={'#FF0000'}
                        tabBarActiveTextColor={'#24CD78'}
                        tabBarInactiveTextColor={'#333333'}
                        tabBarPosition='top'>
                        <View tabLabel="我的问题">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshReleaseData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreReleaseData()}}
                                initialListSize={1}
                                enableEmptySections={true}
                                dataSource={this.state.questionDataSource} renderRow={this.questionListRow.bind(this)}/>
                        </View>
                        <View tabLabel="我的回答">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshJoinData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                onEndReached={() => {this.loadMoreJoinData()}}
                                initialListSize={1}
                                enableEmptySections={true}
                                dataSource={this.state.answerDataSource} renderRow={this.answerListRow.bind(this)}/>
                        </View>
                    </ScrollableTabView>
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});